<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>小黄美妆店库存</title>
     <style>
       body {
      text-align: center;
      background-color: #ddecaf;
    }

    table {
      margin: 0 auto;
      border-collapse: collapse;
      width: 80%;
      border: 2px solid #6297cc;
    }

    th,
    td {
      border: 1px solid #3399ff;
      padding: 10px;
      text-align: center;
    }

    th {
      background-color: #007acc;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #e6f2ff;
    }

    tr:hover {
      background-color: #b3d9ff;
    }
    a {
      display: inline-block;
      text-decoration: none;
      color: #549be8;
      padding: 10px;
      border: 1px solid #007bff;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap; /* 防止内容过长时换行 */
    }

    a:hover {
      background-color: #4e99e9;
      color: white;
    }
    .del{
     display: inline-block;
      text-decoration: none;
      color: #FF4500;
      padding: 10px;
      border: 1px solid #FF4500;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap; /* 防止内容过长时换行 */
    }
    .del:hover{
     background-color: #FF4500;
      color: white;
    }
    .search-container {
            text-align: center;
            margin-top: 20px;
        }

       .search-input {
            width: 300px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .jianzhu_bot{width:982px; margin:0 auto; overflow:hidden; padding-top:20px; padding-bottom:20px; border-bottom:1px solid #abdae2; background:#ddd68c;}
        .jianzhuA{width:440px; float:left; margin-left:40px; display:inline; text-align:left}

     </style>
     <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
  <br> <% include ../header.ejs %><br><br><br>
     <h1 style="text-align: center">店内库存展示</h1>
     <!-- <a href="/">首页</a> -->
     <a href="/akbingo/insert">添加商品</a>
     <div class="search-container">
          <input class="search-input" type="text" placeholder="美女，请输入关键词搜索">
          <button onclick="searchAkbingos()">搜索</button>
      </div>
     <br/>






     <div class="jianzhu_bot">

      <div class="jianzhuA">
      <a href="https:\\baike.baidu.com\item\%E7%B2%89%E5%BA%95%E6%B6%B2\8965398?fr=ge_ala" ><img src="https:\\preview.qiantucdn.com\original_origin_pic\18\09\08\52d16991639a787c61341e3ad5f1200a.png%21qt400"   style=" float:left;width: 350px;
  height: 350px;"/></a>
      <h1>粉底液</h1>
      <p  style=" float:left; margin-left:10px; display:inline">粉底液质地轻薄,易涂抹,少油腻感,是当今很流行的一种底妆产品,适合大多数人的肌肤。 <a href="https:\\baike.baidu.com\item\%E7%B2%89%E5%BA%95%E6%B6%B2\8965398?fr=ge_ala" >[详细]</a><br />
      </p>
      </div>
      
      
      <div class="jianzhuA">
        <a href="https:\\baike.baidu.com\item\%E5%8F%A3%E7%BA%A2\10068?fr=ge_ala" ><img src="https:\\img2.baidu.com\it\u=993553953,496469559&fm=253&fmt=auto&app=138&f=PNG?w=315&h=340"   style=" float:left;width: 350px;
  height: 350px;"/></a>
        <h1>口红</h1>
        <p  style=" float:left; margin-left:10px; display:inline">‌口红是一种主要使用于嘴唇的化妆品，能够增加嘴唇的色泽或改变嘴唇的颜色。 <a href="https:\\baike.baidu.com\item\%E5%8F%A3%E7%BA%A2\10068?fr=ge_ala" >[详细]</a><br />
        </p>
        </div>
      
      
       <div class="jianzhuA">
          <a href="https:\\baike.baidu.com\item/%E7%9D%AB%E6%AF%9B%E8%86%8F\1153492?fr=ge_ala" ><img src="https:\\img2.baidu.com\it\u=3779092932,1711675511&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500"   style=" float:left;width: 350px;
  height: 350px;"/></a>
          <h1>睫毛膏</h1>
          <p  style=" float:left; margin-left:10px; display:inline">睫毛膏是一种用于修饰和美化睫毛的化妆品，主要功能是增长、卷翘和浓密睫毛，使眼睛看起来更大更有神‌‌ <a href="https:\\baike.baidu.com\item/%E7%9D%AB%E6%AF%9B%E8%86%8F\1153492?fr=ge_ala" >[详细]</a><br />
          </p>

          </div> <div class="jianzhuA">
            <a href="https:\\baike.baidu.com\item\%E7%9C%89%E7%AC%94\10244700?fr=ge_ala" ><img src="https:\\img0.baidu.com\it\u=1847919957,1550455954&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"   style=" float:left;width: 350px;
  height: 350px;"/></a>
            <h1>眉笔</h1>
            <p  style=" float:left; margin-left:10px; display:inline">‌眉笔是一种美容化妆品，主要用于画眉，具有多种颜色选择，如棕色、黑色、灰色和咖啡色等，可以根据肤色和发色选择不同的深浅色调。 <a href="https:\\baike.baidu.com\item\%E7%9C%89%E7%AC%94\10244700?fr=ge_ala" >[详细]</a><br />
            </p>
            </div>
            <div class="jianzhuA">
              <a href="https:\\baike.baidu.com\item\%E7%B2%89%E5%BA%95%E6%B6%B2\8965398?fr=ge_ala" ><img src="https:\\preview.qiantucdn.com\original_origin_pic\18\09\08\52d16991639a787c61341e3ad5f1200a.png%21qt400"   style=" float:left;width: 350px;
          height: 350px;"/></a>
              <h1>粉底液</h1>
              <p  style=" float:left; margin-left:10px; display:inline">粉底液质地轻薄,易涂抹,少油腻感,是当今很流行的一种底妆产品,适合大多数人的肌肤。 <a href="https:\\baike.baidu.com\item\%E7%B2%89%E5%BA%95%E6%B6%B2\8965398?fr=ge_ala" >[详细]</a><br />
              </p>
              </div>
              
              
              <div class="jianzhuA">
                <a href="https:\\baike.baidu.com\item\%E5%8F%A3%E7%BA%A2\10068?fr=ge_ala" ><img src="https:\\img2.baidu.com\it\u=993553953,496469559&fm=253&fmt=auto&app=138&f=PNG?w=315&h=340"   style=" float:left;width: 350px;
          height: 350px;"/></a>
                <h1>口红</h1>
                <p  style=" float:left; margin-left:10px; display:inline">‌口红是一种主要使用于嘴唇的化妆品，能够增加嘴唇的色泽或改变嘴唇的颜色。 <a href="https:\\baike.baidu.com\item\%E5%8F%A3%E7%BA%A2\10068?fr=ge_ala" >[详细]</a><br />
                </p>
                </div>
              
              
               <div class="jianzhuA">
                  <a href="https:\\baike.baidu.com\item/%E7%9D%AB%E6%AF%9B%E8%86%8F\1153492?fr=ge_ala" ><img src="https:\\img2.baidu.com\it\u=3779092932,1711675511&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500"   style=" float:left;width: 350px;
          height: 350px;"/></a>
                  <h1>睫毛膏</h1>
                  <p  style=" float:left; margin-left:10px; display:inline">睫毛膏是一种用于修饰和美化睫毛的化妆品，主要功能是增长、卷翘和浓密睫毛，使眼睛看起来更大更有神‌‌ <a href="https:\\baike.baidu.com\item/%E7%9D%AB%E6%AF%9B%E8%86%8F\1153492?fr=ge_ala" >[详细]</a><br />
                  </p>
        
                  </div> <div class="jianzhuA">
                    <a href="https:\\baike.baidu.com\item\%E7%9C%89%E7%AC%94\10244700?fr=ge_ala" ><img src="https:\\img0.baidu.com\it\u=1847919957,1550455954&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"   style=" float:left;width: 350px;
          height: 350px;"/></a>
                    <h1>眉笔</h1>
                    <p  style=" float:left; margin-left:10px; display:inline">‌眉笔是一种美容化妆品，主要用于画眉，具有多种颜色选择，如棕色、黑色、灰色和咖啡色等，可以根据肤色和发色选择不同的深浅色调。 <a href="https:\\baike.baidu.com\item\%E7%9C%89%E7%AC%94\10244700?fr=ge_ala" >[详细]</a><br />
                    </p>
                    </div>
         
      
      </div>
      
      <br><br><br><br><br><br>



     <table width="100%">
          <thead>
               <tr>
                    <th>ID</th>
                    <th>商品名</th>
                    <th>商品价格</th>
                    <th>商品类别</th>
                    <th>商品库存</th>
                    <th>删除</th>
                    <th>编辑</th>
               </tr>
          </thead>
         
         
          <tbody>
               <%data.forEach(function (item, index) { %>
               <tr>
                    <td><%= item.id %></td>
                    <td><%= item.uname %></td>
                    <td><%= item.price  %></td>
                    <td><%= item.type %></td>
                    <td><%= item.inventory %></td>
                    <td><a class='del' href="/akbingo/delete/<%= item.id %>">删除</a></td>
                    <td><a href="/akbingo/edit/<%= item.id %>">编辑</a></td>
               </tr>
               <% }); %>
          </tbody>
     </table>




</body>
<script>
     function searchAkbingos() {
          const keyword = document.querySelector('.search-input').value;
     if (keyword) {
       $.ajax({
         url: `/akbingo/search/${keyword}`,
         type: 'GET',
         success: function (akbingos) {
           // 将查询结果赋值给 data
           data = akbingos;
           // 更新页面上的表格或其他展示区域
           updateTable(data);
         },
         error: function (error) {
           // 显示错误消息
           $('table').html('<tr><td colspan="6">加载成员列表失败，请稍后重试。</td></tr>');
           console.error(error);
         }
       });
     } else {
       window.location.href = `/akbingo`;
     }
     }

     function updateTable(data) {
     // 清空现有表格内容
     $('table tbody').empty();
           // 如果数据为空，显示提示信息
    if (data.length === 0) {
        $('table tbody').append('<tr><td colspan="6">未找到此成员。</td></tr>');
        return;
    }
  // 遍历数据并构建表格行
  $.each(data, function(index, item) {
    var row = "<tr>" +
              "<td>" + item.id + "</td>" +
              "<td>" + item.uname + "</td>" +
              "<td>" + item.price + "</td>" +
              "<td>" + item.type + "</td>" +
              "<td>" + item.inventory + "</td>" +
              "<td><a class='del' href='/akbingo/delete/" + item.id + "'>删除</a></td>" +
              "<td><a href='/akbingo/edit/" + item.id + "'>编辑</a></td>" +
              "</tr>";
    $('table tbody').append(row);
  });
}
 </script>

</html>